<template>
  <div class="app-container">
    <div class="work-title-box">工作台</div>
    <div class="body-box">
      <div class="left-box">

        <div class="icon-number-box">
          <div class="item-box">
            <div>
              <el-image class="image-box" :src="require('@/assets/images/index/rk.png')"/>
            </div>
            <div class="right-item">
              <div>待办处理数据</div>
              <div style="display: flex;line-height: 50px">
                <div style="font-size: 22px;font-weight: bold;width: 75%">{{ numberData.totalNum }}</div>
                <div>条</div>
              </div>
            </div>
          </div>

          <div class="item-box" v-has-permi="['work:data:wyj']">
            <div>
              <el-image class="image-box" :src="require('@/assets/images/index/yj.png')"/>
            </div>
            <div class="right-item">
              <div>未验机数据</div>
              <div style="display: flex;line-height: 50px">
                <div style="font-size: 22px;font-weight: bold;width: 75%">{{ numberData.testNum }}</div>
                <div>条</div>
              </div>
            </div>
          </div>

          <div class="item-box" v-has-permi="['work:data:wbj']">
            <div>
              <el-image class="image-box" :src="require('@/assets/images/index/bj.png')"/>
            </div>
            <div class="right-item">
              <div>未报价数据</div>
              <div style="display: flex;line-height: 50px">
                <div style="font-size: 22px;font-weight: bold;width: 75%">{{ numberData.offerNum }}</div>
                <div>条</div>
              </div>
            </div>
          </div>


          <div class="item-box" v-has-permi="['work:data:test']">
            <div>
              <el-image class="image-box" :src="require('@/assets/images/index/yj.png')"/>
            </div>
            <div class="right-item">
              <div>已验机数据</div>
              <div style="display: flex;line-height: 50px">
                <div style="font-size: 22px;font-weight: bold;width: 75%">{{ numberData.testNumMe }}</div>
                <div>条</div>
              </div>
            </div>
          </div>

          <div class="item-box" v-has-permi="['work:data:inStock']">
            <div>
              <el-image class="image-box" :src="require('@/assets/images/index/bj.png')"/>
            </div>
            <div class="right-item">
              <div>入库数量</div>
              <div style="display: flex;line-height: 50px">
                <div style="font-size: 22px;font-weight: bold;width: 75%">
                  {{ numberData.stockNum ? numberData.stockNum : 0 }}
                </div>
                <div>条</div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-top: 50px;display: flex;align-items: center" v-has-permi="['work:list:sale','work:list:lineSale','work:list:offer']">

          <div>选择日期：</div>
          <el-date-picker
              v-model="dateValue"
              type="date"
              @change="timeChange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              :clearable="false"
              placeholder="选择日期，默认当天">
          </el-date-picker>
        </div>

        <div v-has-permi="['work:list:sale']">
          <div class="data-title-box">
            销售(利润：
            {{ getTotalNumber(saleBillList) }}
            ，售出：{{getSaleNumber(saleBillList)}}
            ，退货：{{getRefundNum(saleBillList)}}
            )
          </div>
          <div style="margin-top: 20px">
            <el-table border :data="saleBillList">
              <el-table-column type="index" align="center" label="编号"/>
              <el-table-column align="center" label="商品编码" prop="goodsId"/>
              <el-table-column align="center" label="商品名称" prop="goodsName" show-overflow-tooltip/>
              <el-table-column align="center" label="利润">
                <template v-slot="scope">
                  {{ parseInt(scope.row.salePrice - scope.row.costPrice) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否退货" prop="hasRefund">
                <template v-slot="scope">
                  {{ Number(scope.row.hasRefund) === 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <!--              <el-table-column align="center" label="供应商" prop="supplierName"/>-->
              <!--              <el-table-column align="center" label="买家" prop="buyerName"/>-->
            </el-table>
          </div>
        </div>

        <div v-has-permi="['work:list:lineSale']">
          <div class="data-title-box">
            平台上架(利润：
            {{ getTotalNumber(saleBillList) }}
            ，售出：{{getSaleNumber(saleBillList)}}
            ，退货：{{getRefundNum(saleBillList)}}
            )</div>
          <div style="margin-top: 20px">
            <el-table border :data="saleBillList">
              <el-table-column type="index" align="center" label="编号"/>
              <el-table-column align="center" label="商品编码" prop="goodsId"/>
              <el-table-column align="center" label="商品名称" prop="goodsName" show-overflow-tooltip/>
              <el-table-column align="center" label="利润">
                <template v-slot="scope">
                  {{ parseInt(scope.row.salePrice - scope.row.costPrice) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否退货" prop="hasRefund">
                <template v-slot="scope">
                  {{ Number(scope.row.hasRefund) === 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <!--              <el-table-column align="center" label="供应商" prop="supplierName"/>-->
              <!--              <el-table-column align="center" label="买家" prop="buyerName"/>-->
            </el-table>
          </div>
        </div>

        <div v-has-permi="['work:list:offer']">
          <div class="data-title-box">报价师
            (利润：
            {{ getTotalNumber(offerBillList) }}
            ，售出：{{getSaleNumber(offerBillList)}}
            ，退货：{{getRefundNum(offerBillList)}}
            )
          </div>
          <div style="margin-top: 20px">
            <el-table border :data="offerBillList">
              <el-table-column type="index" align="center" label="编号"/>
              <el-table-column align="center" label="商品编码" prop="goodsId"/>
              <el-table-column align="center" label="商品名称" prop="goodsName" show-overflow-tooltip/>
              <el-table-column align="center" label="利润">
                <template v-slot="scope">
                  {{ parseInt(scope.row.salePrice - scope.row.costPrice) }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否退货" prop="hasRefund">
                <template v-slot="scope">
                  {{ Number(scope.row.hasRefund) === 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <!--              <el-table-column align="center" label="供应商" prop="supplierName"/>-->
              <!--              <el-table-column align="center" label="买家" prop="buyerName"/>-->
            </el-table>
          </div>
        </div>


        <!--        <div class="chart-box" style="margin-top: 20px">-->
        <!--          <div id="myChart" style="width: 100%;height: 600px"></div>-->
        <!--        </div>-->
      </div>
      <div class="right-box">
        <div class="work-title-box">待办处理事项</div>
        <div>
          <el-row>
            <el-col :span="8">
              <div class="menu-item-box" @click="gotoPage('/test/goodsTest')" v-has-permi="['work:data:wyj']">
                <div class="icon-box">
                  <i class="el-icon-cpu" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.testNum">
                  {{ numberData.testNum > 99 ? '99+' : numberData.testNum }}
                </div>
                <div>待质检</div>
              </div>
              <div class="menu-item-box" @click="gotoPage('/lend/loan')" v-has-permi="['work:data:loan']">
                <div class="icon-box">
                  <i class="el-icon-c-scale-to-original" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.loanNum">
                  {{ numberData.loanNum > 99 ? '99+' : numberData.loanNum }}
                </div>
                <div>出借中</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="menu-item-box" @click="gotoPage('/quote/quotation')" v-has-permi="['work:data:wbj']">
                <div class="icon-box">
                  <i class="el-icon-s-order" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.offerNum">
                  {{ numberData.offerNum > 99 ? '99+' : numberData.offerNum }}
                </div>
                <div>待报价</div>
              </div>
              <div class="menu-item-box" @click="gotoPage('/manage/stock')" v-has-permi="['work:data:dl']">
                <div class="icon-box">
                  <i class="el-icon-brush" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.manageNum">
                  {{ numberData.manageNum > 99 ? '99+' : numberData.manageNum }}
                </div>
                <div>打理仓</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="menu-item-box" @click="gotoPage('/stock/warehouse')" v-has-permi="['work:data:stockLog']">
                <div class="icon-box">
                  <i class="el-icon-s-claim" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.confirmNum">
                  {{ numberData.confirmNum > 99 ? '99+' : numberData.confirmNum }}
                </div>
                <div>仓库待确认</div>
              </div>
              <div class="menu-item-box" @click="gotoPage('/sale/bill')" v-has-permi="['work:data:bill']">
                <div class="icon-box">
                  <i class="el-icon-document" style="font-size: 38px"></i>
                </div>
                <div class="msg-num-box" v-if="numberData.billNum">
                  {{ numberData.billNum > 99 ? '99+' : numberData.billNum }}
                </div>
                <div>账单待审核</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="border-top: #EBEEF5 2px solid;width: 90%;height: 20px;margin-left: 5%"></div>
        <el-row>
          <!--          <el-col :span="8">
                      <div class="menu-item-box">
                        <div class="icon-box">
                          <i class="el-icon-document-copy" style="font-size: 38px"></i>
                        </div>
                        &lt;!&ndash;              <div class="msg-num-box">0</div>&ndash;&gt;
                        <div>差异中心</div>
                      </div>
                    </el-col>-->
          <el-col :span="8">
            <div class="menu-item-box" @click="gotoPage('/sale/refund')">
              <div class="icon-box">
                <i class="el-icon-box" style="font-size: 38px"></i>
              </div>
              <div class="msg-num-box" v-if="numberData.refundNum">
                {{ numberData.refundNum > 99 ? '99+' : numberData.refundNum }}
              </div>
              <div>退单处理</div>
            </div>
          </el-col>
          <!--          <el-col :span="8">
                      <div class="menu-item-box" @click="judgeOpen = true">
                        <div class="icon-box">
                          <i class="el-icon-lightning" style="font-size: 38px"></i>
                        </div>
                        <div class="msg-num-box" v-if="judgeList.length">{{ judgeList.length > 99 ? '99+' : judgeList.length }}
                        </div>
                        <div>判责中心</div>
                      </div>
                    </el-col>-->
        </el-row>

        <!--    公搞    -->
        <div class="note-box">
          <div style="display: flex">
            <div class="work-title-box" style="width: 70%">公告</div>
            <div style="width: 30%;text-align: right;color: #00afff;margin-top: 5px;cursor: pointer"
                 @click="gotoPage('/system/notice')">查看更多
            </div>
          </div>
          <div class="list-row-box" v-for="item in noteList" @click="handleNote(item)">
            <el-tag v-if="item.noticeType === '1'" type="danger">通知</el-tag>
            <el-tag v-if="item.noticeType === '2'" type="warning">公告</el-tag>
            <span style="opacity: 0">A</span>
            <div class="note-content-box" style="color: #606266">{{ item.noticeTitle }}</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="noteOpen" :title="noteTitle" width="800px" append-to-body>
      <div>发布时间: {{ detailInfo.createTime }}</div>
      <div class="content-box" v-html="detailInfo.noticeContent"></div>
    </el-dialog>

    <el-dialog :visible.sync="judgeOpen" title="我的判责" width="80%" append-to-body>
      <el-table border :data="judgeList">
        <el-table-column label="序号" align="center" type="index"/>
        <el-table-column label="商品编码" align="center" prop="goodsId" width="180"/>
        <el-table-column label="商品名称" align="center" prop="goodsName" width="150" show-overflow-tooltip/>
        <el-table-column label="判责金额" align="center" prop="price" width="100"/>
        <el-table-column label="创建时间" align="center" prop="crateTime" width="180"/>
        <el-table-column label="判责原因" align="center" prop="remark"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
          <template v-slot="scope">
            <el-popover
                placement="bottom"
                title="申述原因"
                width="400"
                trigger="manual"
                v-model="visible">
              <el-input type="textarea" v-model="scope.row.stateRemark" placeholder="请填写申述原因"/>
              <div style="text-align: right;margin-top: 5px">
                <el-button type="primary" plain size="mini" @click="judgeSubmit(scope.row)">提交</el-button>
              </div>

              <el-button type="text" slot="reference" @click="visible = !visible">{{ visible ? '关闭' : '申述' }}
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getWorkNumber, listOfferBillData, listSaleBillData} from "@/api/statistics/work"
import {listNotice} from "@/api/system/notice";
import {listObligationWork, updateObligation} from "@/api/other/obligation"

export default {
  name: "work",
  data() {
    return {
      dateValue: null,
      saleBillList: [],
      offerBillList: [],
      visible: false,
      judgeOpen: false,
      numberData: {
        totalNum: 0,
        testNum: 0,
        offerNum: 0,
        confirmNum: 0,
        loanNum: 0,
        manageNum: 0,
        billNum: 0,
        refundNum: 0,
        testNumMe: 0
      },
      //判责列表
      judgeList: [],
      noteList: [],
      noteOpen: false,
      noteTitle: undefined,
      detailInfo: {
        noticeContent: undefined,
        createTime: undefined
      }
    }
  },
  mounted() {
    this.getNoteList();
    getWorkNumber().then(res => {
      this.numberData = res.data;
    })

    this.getObligationWork();

    this.getSaleList();
  },
  methods: {
    getSaleList() {
      listSaleBillData({date: this.dateValue}).then(res => {
        this.saleBillList = res.data;
      })

      listOfferBillData({date: this.dateValue}).then(res => {
        this.offerBillList = res.data;
      })
    },
    timeChange() {
      let sel = new Date(this.dateValue).getTime();
      let now = new Date().getTime();
      if(sel > now){
        this.dateValue = null;
        this.msgWarning("还没到哪一天哦");
      }
      if((now - sel) > 2592000000){
        this.dateValue = null;
        this.msgWarning("只能选择30天内");
      }

      this.getSaleList();
    },
    getTotalNumber(list) {
      let num = 0;
      //scope.row.salePrice - scope.row.costPrice
      list.forEach(it => {
        let a = parseInt(it.salePrice - it.costPrice);
        num += a;
      })

      return num;
    },
    getSaleNumber(list) {
      let num = 0;
      list.forEach(it => {
        num += Number(it.salePrice);
      })

      return num;
    },
    getRefundNum(list) {
      let num = 0;
      list.forEach(it => {
        if(it.hasRefund === 1)
          num += Number(it.salePrice);
      })

      return num;
    },
    getObligationWork() {
      listObligationWork().then(res => {
        this.judgeList = res.data;
      })
    },
    judgeSubmit(row) {
      if (!row.stateRemark) {
        this.msgWarning("请输入申述原因");
        return
      }
      row.hasState = 1;
      updateObligation(row).then(res => {
        this.msgSuccess("申述成功");
        this.getObligationWork();
      })
    },
    gotoPage(path) {
      this.$router.push({
        path: path
      })
    },
    handleNote(row) {
      this.detailInfo = row;
      this.noteTitle = row.noticeTitle;
      this.noteOpen = true;
    },
    /** 查询公告列表 */
    getNoteList() {
      this.loading = true;
      const query = {
        pageNum: 1,
        pageSize: 5,
        status: '0'
      }
      listNotice(query).then(response => {
        this.noteList = response.rows;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.note-content-box {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.note-box {
  margin-top: 20px;
  cursor: pointer;

  .list-row-box {
    margin-top: 10px;
    display: flex;
  }
}

.work-title-box {
  font-weight: bold;
  font-size: 20px;
}

.body-box {
  display: flex;
  flex-direction: row;

  .left-box {
    width: 70%;
  }

  .right-box {
    width: 25%;
    margin-left: 3%;
    height: auto;
    padding: 20px;
  }
}

.icon-number-box {
  display: flex;
  flex-direction: row;
  margin-top: 20px;

  .item-box {
    width: 210px;
    height: 100px;
    box-shadow: #F2F6FC 1px 1px 2px 3px;
    display: flex;
    flex-direction: row;
    padding: 20px;
    margin-right: 20px;

    .image-box {
      width: 55px;
      height: 55px;
    }

    .right-item {
      margin-left: 15px;
    }
  }
}

.menu-item-box {
  padding: 10px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;

  .icon-box {
    background-color: #F2F6FC;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 5px;
  }

  .msg-num-box {
    background-color: #F56C6C;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    font-size: 10px;
    line-height: 20px;
    color: #FFFFFF;
    top: 6px;
    right: 14px;
  }
}

.content-box {
  ::v-deep img {
    max-width: 100%;
  }
}

.data-title-box {
  margin-top: 30px;
  font-size: 18px;
}

.card-box {
  width: 240px;
  padding: 10px 30px;
  margin-top: 20px;
  margin-right: 130px;
  text-align: center;
}
</style>
